<style>
.bottem-button {
  margin: 20px 0;
}

.el-input {
  width: 300px;
  margin: 0 10px;
}

.tip {
  color: red;
}
</style>


<template>
  <div id="app">
    <h3>遇到的问题，心得，笔记页面</h3>
    <div>
      <p>
        Q：vue-cli升级时候报错 npm ERR! code EINTEGRITY
      </p>
      <div>
        A：全局更新更新一次 npm
        npm install --global npm
      </div>
    </div>
    <div class="bottem-button">
      <p>
        我知道 你可能想要用到vuex
      </p>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        class="el-input"
      ></el-input>
      <el-button
        type="primary"
        @click="onVuex"
      >尝试 vuex</el-button>
    </div>
    <div
      class="tip"
      v-if="text !== ''"
    >
      这是你 bus 的值：{{text}}
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import Bus from "@/utils/bus";
let a = "";

export default {
  created() {
    Bus.$on("isBus", value => {
      a = value;
    });
    this.text = a;
  },

  data() {
    return {
      input: "",
      text: ""
    };
  },

  methods: {
    onBus(value) {
      console.log(this.text);
    },

    onVuex() {
      let input = this.input;
      if (input === "") {
        this.$message({
          message: "输入一个值来尝试 vuex",
          type: "warning"
        });
      } else {
        this.setText(input);
        this.$router.push({
          path: "/infoPage",
          query: {
            tip: "带参数是想证明没用传参完成"
          }
        });
      }
    },

    ...mapMutations(["setText"])
  },

  beforeDestroy() {
    // Bus.$off("isBus");
  }
};
</script>




